<template>
  <div class="relation-page app-container">
    <div class="container">
      <div class="container-header">
        <div class="left">
          <div class="title">子投资</div>
          <div>
            <el-form ref="dataForm1" :inline="true" label-width="80px" :model="dataForm">
              <el-form-item label="" prop="strategyName">
                <el-input v-model="dataForm.strategyName" clearable placeholder="请输入策略名称" style="width: 240px;"></el-input>
              </el-form-item>
              <el-form-item label="" prop="investStatus">
                <el-select v-model="dataForm.investStatus" clearable placeholder="请选择投资状态" style="width: 240px;">
                  <el-option :label="item.name" :value="item.id" v-for="item in investStatusList" :key="item.id"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item v-show="dataForm" label="" prop="startIncomRate">
                <el-input-number v-model="dataForm.startIncomRate" style="width:140px;"></el-input-number>%
                ~
                <el-input-number v-model="dataForm.endIncomRate" style="width:140px;"></el-input-number>%
              </el-form-item>
              <el-form-item style="margin-left: 20px">
                <el-button class="bg-green" @click="findAllDetailByPage">查询</el-button>
                <el-button @click="resetForm">重置</el-button>
                <span style="margin-left: 10px;cursor: pointer;color: #1890ff;" @click="isSelectMore = !isSelectMore">展示更多筛选<i :class="isSelectMore?'el-icon-arrow-down':'el-icon-arrow-right'" /></span>
              </el-form-item>
            </el-form>
            <el-form v-show="isSelectMore" ref="dataForm2" :inline="true" label-width="80px" :model="dataForm">
              <el-form-item prop="startTime" label="">
                <el-date-picker
                  v-model="dataForm.startTime"
                  type="date"
                  value-format="yyyy-MM-dd"
                  placeholder="开始日期">
                </el-date-picker>
                ~
                <el-date-picker
                  v-model="dataForm.endTime"
                  type="date"
                  value-format="yyyy-MM-dd"
                  placeholder="结束日期">
                </el-date-picker>
              </el-form-item>
              <el-form-item prop="investIndex" label="对标指数">
                <indexSelectTree :multiple="false" :width="240" :indexType.sync="dataForm.investIndex" @contrastOptionsObj="contrastOptionsObjHandle"></indexSelectTree>
              </el-form-item>
            </el-form>
          </div>
        </div>
        <div class="right-btn">
          <el-button type="primary" @click="addOrUpdateHandle()">
            <i class="el-icon-plus el-icon--right"></i>
            新增
          </el-button>
        </div>
      </div>
      <el-table
        ref="policyTable"
        v-loading="listLoading"
        :data="list"
        stripe
        fit
        size="mini"
        max-height="500"
        :header-cell-style="{color:'#333'}"
        style="width: 100%;margin-top: 20px;"
      >
        <el-table-column type="index" label="序号" align="center" width="60" fixed></el-table-column>
        <el-table-column prop="investChildrenName" label="子投资名称" min-width="160" show-overflow-tooltip fixed>
          <template slot-scope="{row}">
            <span v-if="row&&row.hasNetWorth&&row.investStarttime" style="color: #4f95dd;cursor: pointer;" v-afterStrategy="{id: row.id, userId, investId}">{{ row.investChildrenName }}</span>
            <span v-else style="cursor: pointer;color: #999;" @click="$message('该子投资无投后净值')">{{ row.investChildrenName }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="initialNetworth" label="单位净值" min-width="100" align="center"></el-table-column>
        <el-table-column prop="initialShare" label="持仓份额" min-width="100" align="center"></el-table-column>
        <el-table-column prop="initialMoney" label="客户权益(万元)" min-width="120" align="center"></el-table-column>
        <el-table-column prop="investIncomeRate" label="收益率" min-width="80" align="center">
          <template slot-scope="{row}">
            <span v-if="row&&row.investIncomeRate || row&&row.investIncomeRate==0" :class="row.investIncomeRate>=0?'positiveFc':'negativeFc'">{{ row.investIncomeRate }}%</span>
            <span v-else>--</span>
          </template>
        </el-table-column>
        <el-table-column prop="todayIncomRate" label="日收益率" min-width="80" align="center">
          <template slot-scope="{row}">
            <span v-if="row&&row.todayIncomRate || row&&row.todayIncomRate==0" :class="row.todayIncomRate>=0?'positiveFc':'negativeFc'">{{ row.todayIncomRate }}%</span>
            <span v-else>--</span>
          </template>
        </el-table-column>
        <el-table-column prop="investIncomeRate" label="近1月收益率" align="center" min-width="100">
          <template slot-scope="{row}">
            <span v-if="row.investNetWorthExtends&&row.investNetWorthExtends[1].incomeRate || row.investNetWorthExtends&&row.investNetWorthExtends[1].incomeRate==0"
            :class="row.investNetWorthExtends[1].incomeRate>=0?'positiveFc':'negativeFc'">{{ row.investNetWorthExtends[1].incomeRate }}%</span>
            <span v-else>--</span>
          </template>
        </el-table-column>
        <el-table-column prop="investIncomeRate" label="近6月收益率" align="center" min-width="100">
          <template slot-scope="{row}">
            <span v-if="row.investNetWorthExtends&&row.investNetWorthExtends[3].incomeRate || row.investNetWorthExtends&&row.investNetWorthExtends[3].incomeRate==0"
            :class="row.investNetWorthExtends[3].incomeRate>=0?'positiveFc':'negativeFc'">{{ row.investNetWorthExtends[3].incomeRate }}%</span>
            <span v-else>--</span>
          </template>
        </el-table-column>
        <el-table-column prop="investIncomeRate" label="近1年收益率" align="center" min-width="100">
          <template slot-scope="{row}">
            <span v-if="row.investNetWorthExtends&&row.investNetWorthExtends[4].incomeRate || row.investNetWorthExtends&&row.investNetWorthExtends[4].incomeRate==0"
            :class="row.investNetWorthExtends[4].incomeRate>=0?'positiveFc':'negativeFc'">{{ row.investNetWorthExtends[4].incomeRate }}%</span>
            <span v-else>--</span>
          </template>
        </el-table-column>
        <el-table-column prop="latestNetWorthTime" label="净值日期" sortable align="center" min-width="120">
          <template slot-scope="{row}">
            <span v-if="row&&row.latestNetWorthTime">{{ row.latestNetWorthTime | parseTime }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="investStarttime" label="开始日期" sortable align="center" min-width="120">
          <template slot-scope="{row}">
            <span v-if="row&&row.investStarttime">{{ row.investStarttime | parseTime }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="investStatus" label="投资状态" min-width="100" align="center">
          <template slot-scope="{row}">
            <span class="circular" :class="!row.investStatus?'s-warning':row.investStatus==1?'s-success':'s-error'"></span> {{row.investStatus | investStatusFilter}}
          </template>
        </el-table-column>
        <el-table-column prop="strategyName" label="关联策略" min-width="160" show-overflow-tooltip></el-table-column>
        <el-table-column label="操作" align="center" width="190" fixed="right">
          <template slot-scope="{row}">
            <el-button class="filter-item" size="mini" style="margin-left: 10px;" icon="el-icon-edit" @click="addOrUpdateHandle(row.id)">编辑</el-button>
            <el-button class="filter-item" size="mini" style="margin-left: 10px;" icon="el-icon-edit-outline" @click="enternetValueHandle(row)">录入净值</el-button>
          </template>
        </el-table-column>
      </el-table>
      <pagination v-show="total>0" :total="total" :page.sync="listQuery.pageCurrent" :limit.sync="listQuery.limit" @pagination="findAllDetailByPage" />

      <enternetValueOpen ref="enternetValueOpen" v-if="hasEnternetValueOpen" @closeOpen="findAllDetailByPage"></enternetValueOpen>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import indexSelectTree from '@/components/investComn/indexSelectTree.vue'
import { findAllDetailByPage } from '@/api/afterInvest'
import Pagination from '@/components/Pagination'
import enternetValueOpen from './enternetValueOpen.vue'

export default {
  name: 'AfterInvestRelation',
  components: { indexSelectTree, Pagination, enternetValueOpen },
  data() {
    return {
      isSelectMore: true,
      contrastOptions_obj: {},
      dataForm: {
        strategyName: '',
        investIndex: '',
        investIndexText: '',
      },
      investStatusList: [
        { id: 0, name: '未开始' },
        { id: 1, name: '进行中' },
        { id: 2, name: '已终止' }
      ],
      listLoading: false,
      investId: '',
      investAccount: '',
      investAdviser: '',
      total: 0,
      listQuery: {
        pageCurrent: 1,
        limit: 20
      },
      list: [],

      hasEnternetValueOpen: false,
    }
  },
  computed: {
    ...mapGetters(['userId'])
  },
  watch: {
    '$route.query.refresh': {
      handler() {
        this.findAllDetailByPage()
      }
    }
  },
  created() {
    this.investId = this.$route.query.id
    this.investAccount = this.$route.query.investAccount
    this.investAdviser = this.$route.query.investAdviser
    this.findAllDetailByPage()
  },
  filters: {
    investStatusFilter(i) {
      const list = ['未开始', '进行中', '已终止']
      return list[i]
    }
  },
  methods: {
    contrastOptionsObjHandle(obj) {
      this.contrastOptions_obj = obj
    },
    resetForm() {
      this.$refs.dataForm1.resetFields()
      this.$refs.dataForm2.resetFields()
      this.dataForm = {
        strategyName: '',
        investIndex: '',
        investIndexText: '',
      }
      this.findAllDetailByPage()
    },
    addOrUpdateHandle(strategyId) {
      this.$router.push({
        path: '/afterManage/afterInvest/relation/detailsPage',
        query: {
          id: this.investId,
          investIndex: this.$route.query.investIndex,
          investAccount: this.investAccount,
          investAdviser: this.investAdviser,
          strategyId,
        }
      })
    },
    enternetValueHandle(row) {
      if(row.investAccount) {
        this.$message({
          type: 'warning',
          message: '已通过融航子账号自动同步净值数据，无需手动录入'
        })
      }else {
        this.hasEnternetValueOpen = true
        this.$nextTick(() => {
          this.$refs.enternetValueOpen.init(row.strategyId, row.id)
        })
      }
    },
    // 策略列表
    findAllDetailByPage() {
      return new Promise(resolve => {
        this.listLoading = true
        if(this.dataForm.investIndex) {
          this.dataForm.investIndexText = this.contrastOptions_obj[this.dataForm.investIndex]
        }else {
          this.dataForm.investIndexText = ''
        }
        findAllDetailByPage({
          investId: this.investId,
          createdby: this.userId,
          ...this.dataForm,
          ...this.listQuery
        }).then(res => {
          this.listLoading = false
          this.list = res.body.list
          this.total = res.body.total
          console.log('策略列表', this.list)
          resolve(true)
        })
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.relation-page {
  .circular {
    width: 8px;
    height: 8px;
    display: inline-block;
    border-radius: 50%;

  }
}
</style>

